import { getGroupChildrenByHTMLElement } from "./service";
import { generateID } from "./utils";

export default class EPGGroup {
  /**
   * 当前组的唯一 ID
   */
  id = generateID();
  /**
   * 当前 EPGGroup 的 DOM 元素
   */
  el = undefined;
  /**
   * 当前元素的第一层子 EPGItem / EPGGroup
   */
  children = [];
  /**
   * 当前元素是否未默认选择的元素
   */
  isDefault = false;
  /**
   * 更新当前元素的首层子 EPGItem / EPGGroup
   */
  updateChildren() {
    this.children = getGroupChildrenByHTMLElement(this.el);
    return this.children;
  }
  /**
   * 返回当前 EPGGroup 的 HTMLElement 的 getBoundingClientRect
   */
  getRect() {
    return this.el?.getBoundingClientRect();
  }

  constructor(vnode, binding) {
    this.events = {
      click: null,
      focus: null,
      blur: null,
      left: null,
      right: null,
      up: null,
      down: null,
      enter: null,
    };

    this.el = vnode.el;

    if (this.el.dataset.epgGroupId) {
      this.id = this.el.dataset.epgGroupId;
    } else {
      this.el.dataset.epgGroupId = this.id;
    }
    this.updateChildren();
    this.isDefault = !!(binding.value && binding.value.default);
    if (vnode.props?.onUp) {
      this.events.up = vnode.props.onUp;
    }
    if (vnode.props?.onDown) {
      this.events.down = vnode.props.onDown;
    }
    if (vnode.props?.onLeft) {
      this.events.left = vnode.props.onLeft;
    }
    if (vnode.props?.onRight) {
      this.events.right = vnode.props.onRight;
    }
    if (vnode.props?.onEnter) {
      this.events.right = vnode.props.onEnter;
    }
  }
}
